<template>
    <div class="page">
        <el-card>
            <div class="card-head l-f l-row-end">
                <el-button type="primary" size="small">重启采集程序</el-button>
                <el-button type="primary" size="small" @click="onGateWay">定义网关</el-button>
                <el-button type="primary" size="small">配置导入导出</el-button>
            </div>
            <el-row class="l-mg-top10" :gutter="20">
                <el-col :span="7">
                    <el-card>
                        <div class="l-f l-row-sb">
                            <h3>设备列表</h3>
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="onAddDevice">添加设备</el-button>
                        </div>
                        <el-table border :data="deviceData" style="width: 100%" :row-class-name="tableRowClassName"
                            @row-click="rowClick" v-loading="deviceLoading">
                            <el-table-column prop="device_no" label="设备序号" width="120">
                            </el-table-column>
                            <el-table-column prop="device_name" label="设备名称" min-width="180">
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleDeviceEdit(scope.row)" type="text" size="small">修改</el-button>
                                    <el-button @click="handleDeviceDel(scope.row)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :span="17">
                    <el-card>
                        <div class="card-search">
                            <el-form ref="form" :model="params" label-width="70px" size="mini" inline>
                                <el-form-item label="变量名称">
                                    <el-input v-model="params.name"></el-input>
                                </el-form-item>
                                <el-form-item label="变量别名">
                                    <el-input v-model="params.alias"></el-input>
                                </el-form-item>
                                <el-form-item label="分组">
                                    <el-select v-model="params.group" placeholder="请选择分组">
                                        <el-option label="分组一" value="shanghai"></el-option>
                                        <el-option label="分组二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="mini">搜索</el-button>
                                    <el-button type="primary" size="mini" @click="onSelectAll">{{ isShowSelection ? '取消批量选择'
                                        : '批量选择' }}</el-button>
                                    <el-button type="primary" size="mini" @click="onAddVariable">添加变量</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <el-table border :data="listData" style="width: 100%" @selection-change="handleSelectionChange" v-loading="variableLoading">
                            <el-table-column v-if="isShowSelection" type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="id" label="ID" width="180">
                            </el-table-column>
                            <el-table-column prop="variable_name" label="变量名字" min-width="140">
                            </el-table-column>
                            <el-table-column prop="variable_alias" label="变量别名" min-width="140">
                            </el-table-column>
                            <el-table-column prop="variable_type" label="数据类型" min-width="150">
                            </el-table-column>
                            <el-table-column prop="temporary_storage_address" label="寄存器" min-width="150">
                            </el-table-column>
                            <el-table-column label="操作" min-width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleVariableEdit(scope.row)" type="text" size="small">修改</el-button>
                                    <el-button @click="handleVariableCopy(scope.row)" type="text" size="small">复制</el-button>
                                    <el-button @click="handleVariableDel(scope.row)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="card-pagination l-f l-row-sb">
                            <div>
                                <template v-if="multipleSelection.length > 0 && isShowSelection">
                                    <el-button type="danger" size="mini" @click="onDelAll">批量删除</el-button>
                                    <el-button type="primary" size="mini" @click="onEditAll">批量修改</el-button>
                                </template>
                            </div>
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="params.page" background :page-sizes="[20, 30, 50, 100]"
                                :page-size="params.page_size" layout="sizes, prev, pager, next" :total="400">
                            </el-pagination>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <!-- 网关配置 -->
        <el-dialog title="网关配置" :visible.sync="gatewayVisible" width="500px">
            <el-form ref="form" :model="gatewayData" label-width="100px">
                <el-form-item label="网关CID">
                    <el-input v-model="gatewayData.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="网关序列号">
                    <el-input v-model="gatewayData.alias" disabled></el-input>
                </el-form-item>
                <el-form-item label="网关名称">
                    <el-input v-model="gatewayData.alias"></el-input>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="gatewayData.alias" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="gatewayVisible = false">取 消</el-button>
                <el-button type="primary" @click="gatewayVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 设备添加编辑 -->
        <el-dialog :title="isEditDevice ? '编辑设备' : '添加设备'" :visible.sync="deviceVisible" width="800px">
            <el-form :model="deviceRuleForm" ref="deviceRuleForm" label-width="100px">
                <el-tabs type="border-card" v-model="deviceActiveName">
                    <el-tab-pane label="一般设置" name="first">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="设备名称" prop="device_name" :rules="[
                                    { required: true, message: '请输入设备名称', trigger: 'blur' }
                                ]">
                                    <el-input v-model="deviceRuleForm.device_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备序号" prop="device_no" :rules="[
                                    { required: true, message: '请输入设备序号', trigger: 'blur' }
                                ]">
                                    <el-input v-model="deviceRuleForm.device_no"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="是否开启" prop="is_open">
                                    <el-select v-model="deviceRuleForm.is_open" placeholder="请选择是否开启">
                                        <el-option v-for="(item, index) in true_false_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="从站地址" prop="slave_station_address" :rules="[
                                    { required: true, message: '请输入从站地址', trigger: 'blur' }
                                ]">
                                    <el-input v-model="deviceRuleForm.slave_station_address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="通讯协议" prop="communication_protocol">
                                    <el-select v-model="deviceRuleForm.communication_protocol" placeholder="请选择通讯协议">
                                        <el-option v-for="(item, index) in communication_protocol_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接口类型" prop="interface_type">
                                    <el-select v-model="deviceRuleForm.interface_type" placeholder="请选择接口类型">
                                        <el-option v-for="(item, index) in interface_type_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="CPU类型" prop="cpu_type" :rules="[
                                    { required: true, message: '请选择CPU类型', trigger: 'change' }
                                ]">
                                    <el-select v-model="deviceRuleForm.cpu_type" placeholder="请选择CPU类型">
                                        <el-option v-for="(item, index) in cpu_type_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="串口号" prop="serial_port_no">
                                    <el-select v-model="deviceRuleForm.serial_port_no" placeholder="请选择接口类型">
                                        <el-option v-for="(item, index) in serial_port_no_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="波特率" prop="baud">
                                    <el-select v-model="deviceRuleForm.baud" placeholder="请选择波特率">
                                        <el-option v-for="(item, index) in baud_list" :key="index" :label="item.item_text"
                                            :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="数据位" prop="data_bit">
                                    <el-select v-model="deviceRuleForm.data_bit" placeholder="请选择数据位">
                                        <el-option v-for="(item, index) in data_bit_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="停止位" prop="stop_bit">
                                    <el-select v-model="deviceRuleForm.stop_bit" placeholder="请选择停止位">
                                        <el-option v-for="(item, index) in stop_bit_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="奇偶校验" prop="parity_check">
                                    <el-select v-model="deviceRuleForm.parity_check" placeholder="请选择奇偶校验">
                                        <el-option v-for="(item, index) in parity_check_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-form-item label="采集周期" prop="acquisition_cycle">
                            <div class="l-f">
                                <el-input-number v-model="deviceRuleForm.acquisition_cycle" :min="0"
                                    :max="999999"></el-input-number>
                                <span class="l-mg-left10">s</span>
                            </div>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="高级选项" name="second">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="回复超时" prop="reply_timeout">
                                    <div class="l-f">
                                        <el-input-number v-model="deviceRuleForm.reply_timeout" :min="0"
                                            :max="999999"></el-input-number>
                                        <span class="l-mg-left10">ms</span>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="扩展字段" prop="extended_fields">
                                    <el-input v-model="deviceRuleForm.extended_fields"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="最大组包个数" prop="max_package">
                                    <el-input-number v-model="deviceRuleForm.max_package" :min="0"
                                        :max="999999"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备类别" prop="device_type">
                                    <el-input v-model="deviceRuleForm.device_type"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deviceVisible = false">取 消</el-button>
                <el-button type="primary" @click="onDeviceSubmit('deviceRuleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 变量添加编辑 -->
        <el-dialog :title="isEditVariable ? '编辑变量' : '添加变量'" :visible.sync="variableVisible" width="800px">
            <el-form :model="variableRuleForm" ref="variableRuleForm" label-width="100px">
                <el-tabs type="border-card" v-model="variableActiveName">
                    <el-tab-pane label="一般设置" name="first">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="变量名字" prop="variable_name" :rules="[
                                    { required: true, message: '请输入变量名字', trigger: 'blur' }
                                ]">
                                    <el-input v-model="variableRuleForm.variable_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="变量别名" prop="variable_alias">
                                    <el-input v-model="variableRuleForm.variable_alias"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="变量类型" prop="variable_type" :rules="[
                                    { required: true, message: '请选择变量类型', trigger: 'change' }
                                ]">
                                    <el-select v-model="variableRuleForm.variable_type" placeholder="请选择变量类型">
                                        <el-option v-for="(item, index) in variable_type_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="寄存器类型" prop="temporary_storage_type" :rules="[
                                    { required: true, message: '请选择寄存器类型', trigger: 'change' }
                                ]">
                                    <el-select v-model="variableRuleForm.temporary_storage_type" placeholder="请选择寄存器类型">
                                        <el-option v-for="(item, index) in temporary_storage_type_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="寄存器地址" prop="temporary_storage_address" :rules="[
                                    { required: true, message: '请输入寄存器地址', trigger: 'blur' }
                                ]">
                                    <el-input v-model="variableRuleForm.temporary_storage_address" placeholder="请输入寄存器地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="变量倍率" prop="variable_magnification">
                                    <el-input-number v-model="variableRuleForm.variable_magnification" :min="0"
                                        :max="999999"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="扩展字段" prop="extended_fields">
                                    <el-input v-model="variableRuleForm.extended_fields" placeholder="请输入扩展字段"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="变量分组" prop="variable_group">
                                    <el-select v-model="variableRuleForm.variable_group" placeholder="请选择变量分组">
                                        <el-option v-for="(item, index) in variable_group_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="跳变阀值" prop="threshold">
                                    <el-input-number v-model="variableRuleForm.threshold" :min="0"
                                        :max="999999"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="高级选项" name="second">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="读写权限" prop="permission">
                                    <el-select v-model="variableRuleForm.permission" placeholder="请选择读写权限">
                                        <el-option v-for="(item, index) in permission_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="变量单位" prop="variable_unit">
                                    <el-input v-model="variableRuleForm.variable_unit"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="警告下线" prop="alarm_lower_limit">
                                    <el-input-number v-model="variableRuleForm.alarm_lower_limit" :min="0"
                                        :max="999999"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="警告上线" prop="alarm_upper_limit">
                                    <el-input-number v-model="variableRuleForm.alarm_upper_limit" :min="0"
                                        :max="999999"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="下线等于警告" prop="alarm_lower_flag">
                                    <el-select v-model="variableRuleForm.alarm_lower_flag" placeholder="请选择下线等于警告">
                                        <el-option v-for="(item, index) in true_false_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="上线等于警告" prop="alarm_upper_flag">
                                    <el-select v-model="variableRuleForm.alarm_upper_flag" placeholder="请选择上线等于警告">
                                        <el-option v-for="(item, index) in true_false_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="警告等级" prop="alarm_level">
                                    <el-select v-model="variableRuleForm.alarm_level" placeholder="请选择警告等级">
                                        <el-option v-for="(item, index) in alarm_level_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="历史存储" prop="historical_storage">
                                    <el-select v-model="variableRuleForm.historical_storage" placeholder="请选择历史存储">
                                        <el-option v-for="(item, index) in true_false_list" :key="index"
                                            :label="item.item_text" :value="item.item_value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="variableVisible = false">取 消</el-button>
                <el-button type="primary" @click="onVariableSubmit('variableRuleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量修改 -->
        <el-dialog title="批量修改" :visible.sync="variableAllVisible" width="600px">
            <el-form ref="form" :model="gatewayData" label-width="80px" inline>
                <el-form-item label="参数">
                    <el-select v-model="variableRuleForm.region" placeholder="请选择参数">
                        <el-option label="寄存器地址" value="shanghai"></el-option>
                        <el-option label="数据类型" value="shanghai"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="gatewayData.alias"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="variableAllVisible = false">取 消</el-button>
                <el-button type="primary" @click="variableAllVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getDeviceListDataApi,
    getDeviceVariableListDataApi,
    addDeviceApi,
    editDeviceApi,
    delDeviceApi,
    addDeviceVariableApi,
    editDeviceVariableApi,
    delDeviceVariableApi
} from '@/api/network'
import { getTwoListDataApi } from '@/api/dict'
export default {
    data() {
        return {
            gatewayVisible: false,
            gatewayData: {
                name: ''
            },
            deviceVisible: false,
            deviceActiveName: 'first',
            variableActiveName: 'first',
            isEditDevice: false,
            deviceLoading: true,
            deviceRuleForm: {
                device_name: "",
                device_type: "",
                device_no: "",
                is_open: "",
                slave_station_address: "",
                communication_protocol: "",
                interface_type: "",
                cpu_type: "",
                serial_port_no: "",
                baud: "",
                data_bit: "",
                stop_bit: "",
                parity_check: "",
                acquisition_cycle: "",
                reply_timeout: "",
                extended_fields: "",
                max_package: ""
            },
            variableVisible: false,
            isEditVariable: false,
            variableLoading: true,
            variableAllVisible: false,
            variableRuleForm: {
                device_id: "",
                variable_name: "",
                variable_alias: "",
                variable_type: "",
                temporary_storage_type: "",
                temporary_storage_address: "",
                variable_magnification: 0,
                extended_fields: "",
                variable_group: "",
                threshold: 0,
                permission: "",
                variable_unit: "",
                alarm_lower_limit: 0,
                alarm_upper_limit: 0,
                alarm_lower_flag: "",
                alarm_upper_flag: "",
                alarm_level: "",
                historical_storage: ""
            },
            deviceData: [],
            currentDeviceIndex: 0,
            listData: [],
            isShowSelection: false,
            multipleSelection: [],
            deviceParams: {
                page: 1,
                page_size: 10
            },
            params: {
                page: 1,
                page_size: 20,
                name: '',
                alias: '',
                group: ''
            },
            communication_protocol_list: [],
            cpu_type_list: [],
            interface_type_list: [],
            baud_list: [],
            serial_port_no_list: [],
            data_bit_list: [],
            stop_bit_list: [],
            parity_check_list: [],
            true_false_list: [],
            variable_type_list: [],
            temporary_storage_type_list: [],
            variable_group_list: [],
            permission_list: [],
            alarm_level_list: []
        }
    },
    created() {
        this.getDeviceListData()
        this.getCommunicationProtocolList()
        this.getInterfaceTypeList()
        this.getCpuTypeList()
        this.getBaudList()
        this.getSerialPortNoList()
        this.getDataBitList()
        this.getStopBitList()
        this.getParityCheckList()
        this.getTrueFalseList()
        this.getVariableTypeList()
        this.getTemporaryStorageTypeList()
        this.getVariableGroupList()
        this.getPermissionList()
        this.getAlarmLevelList()
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === this.currentDeviceIndex) {
                return 'warning-row';
            }
            return '';
        },
        rowClick(row) {
            for (let i = 0; i < this.deviceData.length; i++) {
                if (this.deviceData[i].id === row.id) {
                    this.currentDeviceIndex = i
                    this.getDeviceVariableListData()
                    break
                }
            }
        },
        // 定义网关
        onGateWay() {
            this.gatewayVisible = true
        },
        // 添加设备
        onAddDevice() {
            this.deviceRuleForm = {
                device_name: "",
                device_type: "",
                device_no: "",
                is_open: "",
                slave_station_address: "",
                communication_protocol: "",
                interface_type: "",
                cpu_type: "",
                serial_port_no: "",
                baud: "",
                data_bit: "",
                stop_bit: "",
                parity_check: "",
                acquisition_cycle: "",
                reply_timeout: "",
                extended_fields: "",
                max_package: ""
            }
            this.$refs.deviceRuleForm.resetFields()
            this.isEditDevice = false
            this.deviceVisible = true
        },
        // 编辑设备
        handleDeviceEdit(row) {
            this.isEditDevice = true
            this.deviceRuleForm = row
            this.deviceVisible = true
        },
        // 删除设备
        handleDeviceDel(row) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDeviceApi({
                    id: row.id
                }).then(res => {
                    this.$message.success('删除成功!')
                    this.getDeviceListData()
                }).catch(() => {
                    this.$message.success('删除失败')
                })
            })
        },
        // 设备提交
        onDeviceSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.isEditDevice) {
                        editDeviceApi(this.deviceRuleForm).then(res => {
                        this.deviceVisible = false
                        this.$message.success("编辑成功")
                        this.getDeviceListData()
                        this.$refs[formName].resetFields()
                        this.deviceRuleForm = {
                            device_name: "",
                            device_type: "",
                            device_no: "",
                            is_open: "",
                            slave_station_address: "",
                            communication_protocol: "",
                            interface_type: "",
                            cpu_type: "",
                            serial_port_no: "",
                            baud: "",
                            data_bit: "",
                            stop_bit: "",
                            parity_check: "",
                            acquisition_cycle: "",
                            reply_timeout: "",
                            extended_fields: "",
                            max_package: ""
                        }
                    })
                    }else {
                        addDeviceApi(this.deviceRuleForm).then(res => {
                            this.deviceVisible = false
                            this.$message.success("添加成功")
                            this.getDeviceListData()
                            this.$refs[formName].resetFields()
                            this.deviceRuleForm = {
                                device_name: "",
                                device_type: "",
                                device_no: "",
                                is_open: "",
                                slave_station_address: "",
                                communication_protocol: "",
                                interface_type: "",
                                cpu_type: "",
                                serial_port_no: "",
                                baud: "",
                                data_bit: "",
                                stop_bit: "",
                                parity_check: "",
                                acquisition_cycle: "",
                                reply_timeout: "",
                                extended_fields: "",
                                max_package: ""
                            }
                        })
                    }
                   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 添加变量
        onAddVariable() {
            this.variableVisible = true
            this.variableRuleForm = {
                device_id: "",
                variable_name: "",
                variable_alias: "",
                variable_type: "",
                temporary_storage_type: "",
                temporary_storage_address: "",
                variable_magnification: 0,
                extended_fields: "",
                variable_group: "",
                threshold: 0,
                permission: "",
                variable_unit: "",
                alarm_lower_limit: 0,
                alarm_upper_limit: 0,
                alarm_lower_flag: "",
                alarm_upper_flag: "",
                alarm_level: "",
                historical_storage: ""
            }
            this.$refs.variableRuleForm.resetFields()
        },
         // 编辑变量
         handleVariableEdit(row) {
            this.isEditVariable = true
            this.variableRuleForm = row
            this.variableVisible = true
        },
        // 复制变量
        handleVariableCopy(row) {
            this.isEditVariable = false
            this.variableRuleForm = row
            this.variableVisible = true
        },
        // 删除变量
        handleVariableDel(row) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDeviceVariableApi({
                    id: row.id
                }).then(res => {
                    this.$message.success('删除成功!')
                    this.getDeviceVariableListData()
                }).catch(() => {
                    this.$message.success('删除失败')
                })
            })
        },
        // 批量选择
        onSelectAll() {
            this.isShowSelection = !this.isShowSelection
        },
        // 变量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 变量提交
        onVariableSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.isEditVariable) {
                        editDeviceVariableApi({
                            ...this.variableRuleForm,
                            device_id: this.deviceData[this.currentDeviceIndex].id
                        }).then(res => {
                        this.variableVisible = false
                        this.$message.success("编辑成功")
                        this.getDeviceVariableListData()
                        this.$refs[formName].resetFields()
                        this.variableRuleForm = {
                            device_id: "",
                            variable_name: "",
                            variable_alias: "",
                            variable_type: "",
                            temporary_storage_type: "",
                            temporary_storage_address: "",
                            variable_magnification: 0,
                            extended_fields: "",
                            variable_group: "",
                            threshold: 0,
                            permission: "",
                            variable_unit: "",
                            alarm_lower_limit: 0,
                            alarm_upper_limit: 0,
                            alarm_lower_flag: "",
                            alarm_upper_flag: "",
                            alarm_level: "",
                            historical_storage: ""
                        }
                    })
                    }else {
                        addDeviceVariableApi({
                            ...this.variableRuleForm,
                            device_id: this.deviceData[this.currentDeviceIndex].id
                        }).then(res => {
                            this.variableVisible = false
                            this.$message.success("添加成功")
                            this.getDeviceVariableListData()
                            this.$refs[formName].resetFields()
                            this.variableRuleForm = {
                                device_id: "",
                                variable_name: "",
                                variable_alias: "",
                                variable_type: "",
                                temporary_storage_type: "",
                                temporary_storage_address: "",
                                variable_magnification: 0,
                                extended_fields: "",
                                variable_group: "",
                                threshold: 0,
                                permission: "",
                                variable_unit: "",
                                alarm_lower_limit: 0,
                                alarm_upper_limit: 0,
                                alarm_lower_flag: "",
                                alarm_upper_flag: "",
                                alarm_level: "",
                                historical_storage: ""
                            }
                        })
                    }
                   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 批量修改
        onEditAll() {
            this.variableAllVisible = true
        },
        // 批量删除
        onDelAll() {
            this.$confirm('此操作将删除选中的, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 获取设备列表
        getDeviceListData() {
            getDeviceListDataApi(this.deviceParams).then(res => {
                this.deviceData = res.items
                this.deviceLoading = false
                this.getDeviceVariableListData()
            })
        },
        // 获取设备列表变量
        getDeviceVariableListData() {
            getDeviceVariableListDataApi({
                device_id: this.deviceData[this.currentDeviceIndex].id,
                page: this.params.page,
                page_size: this.params.page_size
            }).then(res => {
                this.variableLoading = false
                this.listData = res.items
            }).catch(() => {
                this.$message.error("获取设备列表变量失败")
            })
        },
        // 获取通讯协议
        getCommunicationProtocolList() {
            getTwoListDataApi({
                dict_id: '7d6f5a1e-5c72-4462-b9cc-c653593b'
            }).then(res => {
                this.communication_protocol_list = res.items
            })
        },
        // 获取接口类型
        getInterfaceTypeList() {
            getTwoListDataApi({
                dict_id: '5960181b-21b2-4e04-a71c-4dcd1818'
            }).then(res => {
                this.interface_type_list = res.items
            })
        },
        // 获取通讯协议
        getCpuTypeList() {
            getTwoListDataApi({
                dict_id: '8fe55895-08da-428f-a4de-aafd26ec'
            }).then(res => {
                this.cpu_type_list = res.items
            })
        },
        // 获取波特率
        getBaudList() {
            getTwoListDataApi({
                dict_id: '65f8e441-c6a3-496f-a006-8e611318'
            }).then(res => {
                this.baud_list = res.items
            })
        },
        // 获取串口号
        getSerialPortNoList() {
            getTwoListDataApi({
                dict_id: '1b8ad352-11a6-4662-bf93-801fc4d9'
            }).then(res => {
                this.serial_port_no_list = res.items
            })
        },
        // 获取数据位
        getDataBitList() {
            getTwoListDataApi({
                dict_id: 'cf3fe67b-f20f-47c8-98e9-ff18d12f'
            }).then(res => {
                this.data_bit_list = res.items
            })
        },
        // 获取停止位
        getStopBitList() {
            getTwoListDataApi({
                dict_id: 'be32068e-b540-44b7-b602-9e99e012'
            }).then(res => {
                this.stop_bit_list = res.items
            })
        },
        // 获取奇偶校验
        getParityCheckList() {
            getTwoListDataApi({
                dict_id: '4f8c8c16-26fc-4194-a752-546163c2'
            }).then(res => {
                this.parity_check_list = res.items
            })
        },
        // 获取是否开启
        getTrueFalseList() {
            getTwoListDataApi({
                dict_id: '2d20feac-b510-425a-b7c7-934b1cf0'
            }).then(res => {
                this.true_false_list = res.items
            })
        },
        // 获取变量类型
        getVariableTypeList() {
            getTwoListDataApi({
                dict_id: 'e6d3ac28-7fe7-40d4-9de4-8fb96bfc'
            }).then(res => {
                this.variable_type_list = res.items
            })
        },
        // 获取寄存器类型
        getTemporaryStorageTypeList() {
            getTwoListDataApi({
                dict_id: '9f7ae1ac-30e0-4c57-b388-af3c1697'
            }).then(res => {
                this.temporary_storage_type_list = res.items
            })
        },
         // 获取变量分组
         getVariableGroupList() {
            getTwoListDataApi({
                dict_id: 'af6bb3c5-c128-457f-81ba-fcd92b92'
            }).then(res => {
                this.variable_group_list = res.items
            })
        },
         // 获取读写权限
         getPermissionList() {
            getTwoListDataApi({
                dict_id: 'e668566b-8818-4785-9da4-1dbd7e77'
            }).then(res => {
                this.permission_list = res.items
            })
        },
         // 获取历史存储
         getAlarmLevelList() {
            getTwoListDataApi({
                dict_id: '36e55ef7-5aaa-4a5d-ae30-3efa4e33'
            }).then(res => {
                this.alarm_level_list = res.items
            })
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
    background: #f0f9eb;
}
</style>